<template>
  <div class="top-middle-cmp">
    <div class="top-middle-background-layer" :style='{"background-image": backgroundUrl, "background-position": "center center", "opacity": "0.2", "background-size": "contain"}'></div>
    <div class="chart-name">
      <div class="chart-name-title">{{title}}</div>
      <div class="chart-name-title-right">
        <dv-decoration-3 style="width:100px;height:20px;" />
        <div class="title-right-cirle"></div>
        <div class="title-right-name">达成率</div>
      </div>
    </div>
    <dv-charts class="chart-main" :option="config" ref="pRef"/>
  </div>
</template>

<script>
export default {
  name: 'PillarLineCmp',
  props:["title", "config", "backgroundUrl"],
  data () {
    return {
      // option: {
      //   legend: {
      //     show: false,
      //     data: [
      //       {
      //         name: '',
      //         color: '#00baff'
      //       },
      //       {
      //         name: '达成率',
      //         color: '#f5d94e'
      //       }
      //     ],
      //     textStyle: {
      //       fill: '#fff'
      //     }
      //   },
      //   xAxis: {
      //     data: [
      //       '1月', '2月', '3月', '4月', '5月', '6月', '7月'
      //     ],
      //     axisLine: {
      //       style: {
      //         stroke: '#999'
      //       }
      //     },
      //     axisLabel: {
      //       style: {
      //         fill: '#999'
      //       }
      //     },
      //     axisTick: {
      //       show: false,//隐藏X轴刻度
      //     }
      //   },
      //   yAxis: {
      //     data: 'value',
      //     splitLine: {
      //       show: false
      //     },
      //     axisLine: {
      //       style: {
      //         stroke: '#999'
      //       }
      //     },
      //     axisLabel: {
      //       formatter: '{value} %',
      //       style: {
      //         fill: '#999'
      //       }
      //     },
      //     axisTick: {
      //       show: false
      //     },
      //     min: 0,
      //     max: 150,
      //     interval: 50,
      //   },
      //   series: [
      //     {
      //       name: '',
      //       data: [
      //         55, 65, 50, 70, 68, 55, 30
      //       ],
      //       type: 'bar',
      //       barStyle: {
      //         fill: '#00E5FF'
      //       },
      //       backgroundBar: {
      //         show: true
      //       },
      //       animationCurve: 'easeOutBounce',
      //       barWidth: "20%",
      //       gradient: {
      //         color: ['#00E5FF', '#1BD1F0']
      //       },
      //     },
      //     {
      //       data: [
      //       93.00, 95.00, 97.00, 98.00, 98.30, 98.60, 98.90
      //       ],
      //       label: {
      //         show: true,
      //         position: 'top',
      //         formatter: '{value}%'
      //       },
      //       type: 'line',
      //       name: '达成率',
      //       // lineArea: {
      //       //   show: true,
      //       //   gradient: ['rgba(245, 217, 79, 0.8)', 'rgba(245, 217, 79, 0.2)']
      //       // },
      //       lineStyle: {
      //         stroke: '#f5d94e'
      //       },
      //       linePoint: {
      //         radius: 4,
      //         style: {
      //           fill: '#f5d94e',
      //           stroke: 'transparent'
      //         }
      //       }
      //     }
      //   ]
      // }
    }
  },
  mounted() {
    let that = this;
    window.addEventListener('resize',function() {
      that.$refs.pRef && that.$refs.pRef.resize && that.$refs.pRef.resize()
    })
  },
}
</script>

<style lang="scss" scoped>
.top-middle-cmp {
  width: 100%;
  height: 100%;
  position: relative;
  // padding: 10px;
  box-sizing: border-box;
  background: rgba(15,47,92,0.8);
  // overflow: hidden;

  .top-middle-background-layer {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .chart-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 0 10px;

    .chart-name-title {
      font-weight: bold;
      font-size: .2rem;
    }

    .chart-name-title-right {
      margin: 0 6px;
      display: flex;
      justify-content: center;
      align-items: center;

      .title-right-cirle {
        width: .2rem;
        height: .2rem;
        border-radius: .2rem;
        background-color: #f5d94e;
        margin: 0 8px;
      }

      .chart-name-title {
        color: #f5d94e;
        font-size: .2rem;
      }
    }
  }

  .chart-main {
    padding: 0 10px;
  }
}
</style>
